<template>
  <el-dialog
    class="subject-status-add-record"
    :title="dialogTitle"
    width="660px"
    :show-close="true"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div>
      <el-form :rules="rules" ref="formRef" size="mini" :model="formData" label-width="140px">
        <el-form-item label="项目编号：" prop="projectCode">
          <el-input
            style="width: 80%"
            clearable
            placeholder="请输入"
            maxlength="200"
            v-model.trim="formData.projectCode"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectName">
          <el-input
            style="width: 80%"
            clearable
            placeholder="请输入"
            maxlength="200"
            v-model="formData.projectName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="申办方类型：" prop="sponsorType">
          <el-radio-group v-model="formData.sponsorType">
            <el-radio label="1">医院</el-radio>
            <el-radio label="2">公司</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申办方：" v-if="formData.sponsorType === '1'" prop="hospitalName">
          <rolling-select @change="handleHospitalChange" :value="hospitalName" :width="385" />
        </el-form-item>
        <el-form-item label="申办方：" v-if="formData.sponsorType === '2'">
          <el-input
            v-if="inputType"
            size="mini"
            v-model="formData.sponsorName"
            placeholder="请输入关键字"
            style="width: 80%"
          ></el-input>
          <el-select
            v-else
            filterable
            v-model="formData.sponsorName"
            placeholder="请选择"
            clearable
            style="width: 80%"
            onchange="handleChange"
          >
            <el-option v-for="item in optionsList" :key="item.Name" :label="item.Name" :value="item.Name"> </el-option>
          </el-select>
          &nbsp;
          <el-button v-if="inputType" size="mini" type="primary" @click="handleGetOptions">查询</el-button>
          <el-button v-else size="mini" type="primary" @click="handleReset">重置</el-button>
          <p class="search-tips">为保证数据的搜索效率，每次查询只返回五条选择项，请您尽可能多输入一些关键字</p>
        </el-form-item>
        <el-form-item label="注册类项目：" prop="registerProject">
          <el-radio-group v-model="formData.registerProject">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="方案版本：" prop="schemeVersion" v-if="!this.editData.projectCode">
          <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="formData.schemeVersion">
          </el-input>
        </el-form-item>
        <el-form-item label="方案日期：" prop="schemeDate" v-if="!this.editData.projectCode">
          <el-date-picker style="width: 80%" v-model="formData.schemeDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="伦理号：" prop="ethicsCode">
          <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="formData.ethicsCode">
          </el-input>
        </el-form-item>
        <el-form-item label="注册号：" prop="registerCode">
          <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="formData.registerCode">
          </el-input>
        </el-form-item>
        <el-form-item label="主要研究者：" prop="studyStaff">
          <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="formData.studyStaff">
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="contactWay">
          <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="formData.contactWay">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  props: {
    editData: Object,
    dialogVisible: Boolean,
    dialogTitle: String,
  },
  data() {
    return {
      rules: {
        projectCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入', trigger: 'blur' }],
        registerProject: [{ required: true, message: '请选择', trigger: 'blur' }],
        sponsorType: [{ required: true, message: '请选择', trigger: 'blur' }],
        sponsorName: [{ required: true, message: '请选择', trigger: 'blur' }],
        hospitalName: [{ validator: this.validatorSponsor }],
        schemeVersion: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      loading: false,
      defaultFormData: {
        projectCode: '',
        projectName: '',
        sponsorType: '1',
        sponsor: '',
        registerProject: '1',
        ethicsCode: '',
        registerCode: '',
        studyStaff: '',
        contactWay: '',
        searchName: '',
        schemeVersion: '',
      },
      formData: {},
      optionsList: [],
      hospitalName: '',
      inputType: true,
    }
  },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.formData = this.editData.projectCode ? { ...this.editData } : { ...this.defaultFormData }
        this.hospitalName = this.formData.sponsorName
      } else {
        this.formData = { ...this.defaultFormData }
        this.hospitalName = ''
      }
    },
  },

  methods: {
    ...mapActions('projectList', ['addProject', 'editProject', 'qryProviderNameByName']),
    // 申办方校验
    validatorSponsor(rule, userList, callback) {
      console.log(this.hospitalName, 'hospitalName')
      if (this.hospitalName) {
        callback()
      } else {
        callback(new Error('请填写申办方！'))
      }
    },

    // 关闭取消
    handleClose() {
      this.formData = { ...this.defaultFormData }
      this.hospitalName = ''
      this.$emit('handleCancel')
    },

    // 保存提交
    handleSave() {
      this.loading = true
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const data = {
            ...this.formData,
          }
          if (data.id) {
            this.editProject({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                this.$refs.formRef.resetFields()
                this.$emit('handleCancel', 'refresh')
              }
              this.loading = false
            })
          } else {
            this.addProject({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                this.$refs.formRef.resetFields()
                this.$emit('handleCancel', 'refresh')
              }
              this.loading = false
            })
          }
        } else {
          this.loading = false
          return false
        }
      })
    },

    handleHospitalChange(data) {
      console.log('data', data)
      if (this.hospitalName !== data.value) {
        this.hospitalName = data.value
        this.formData.sponsor = data.value
        this.formData.sponsorName = data.label
      }
    },

    // 重置
    handleReset() {
      this.inputType = true
      this.formData.sponsorName = ''
      this.formData.sponsor = ''
    },

    handleGetOptions(query) {
      if (!this.formData.sponsorName) {
        this.$message.error('请输入关键字查询~')
        return
      }
      this.inputType = false
      const data = {
        searchName: this.formData.sponsorName,
      }
      this.qryProviderNameByName({ data }).then(res => {
        const { code, data = [] } = res
        if (code === 200) {
          const result = JSON.parse(data)
          this.optionsList = result.Result.Data || []
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './add-project.scss';
.search-tips {
  font-size: 10px;
  line-height: 16px;
  margin-top: 4px;
}
</style>
